<template>
    <div class="logistics-management">
      <!-- 顶部按钮组 -->
      <el-button-group>
        <el-button>批量操作</el-button>
        <el-button>导入</el-button>
        <el-button>导出</el-button>
        <el-button>打印</el-button>
      </el-button-group>
      
      
      <!-- 搜索栏 -->
      <el-form :inline="true"  class="demo-form-inline" style="padding: 20px 0;">    <!-- :model="searchForm" -->
      
        <el-form-item label="订单状态">
          <el-select clearable placeholder="请选择订单状态" v-model="searchForm.orderStatus">
              <el-option v-for="item in options" 
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回单状态">
          <el-select clearable placeholder="请选择回单状态" v-model="searchForm.returnStatus">
              <el-option v-for="item in options2" 
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签收日期">
          <el-date-picker   
           v-model="searchForm.signTimeList"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item>
          <el-input  placeholder="请输入关键词搜索" clearable v-model="searchForm.keyword" ></el-input> <!--  -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" >
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleReturn(scope.row)">回单</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单号" width="180px">
        </el-table-column>
        <el-table-column prop="name" label="客户" width="180px"></el-table-column>
       
        <el-table-column prop="returnStatus" label="回单状态" width="180">
              <template slot-scope="scope">
                    {{scope.row.returnStatus == 0?'未回收':
                    (scope.row.returnStatus == 1?'已回收':
                    (scope.row.returnStatus == 2?'已寄出':
                    (scope.row.returnStatus == 3?'已确认':'')))}}
              </template>
        </el-table-column>
        <el-table-column label="订单状态" width="180">
            <template v-slot="scope">
                <span>
                    <span v-if="scope.row.orderStatus == 0">待分配</span>
                    <span v-else-if="scope.row.orderStatus == 1">待调度</span>
                    <span v-else-if="scope.row.orderStatus == 2">运输中</span>
                    <span v-else-if="scope.row.orderStatus == 3">已签收</span>
                    <span v-else-if="scope.row.orderStatus == 4">已拒绝</span>
                    <span v-else-if="scope.row.orderStatus == 5">已取消</span>
                    <span v-else-if="scope.row.orderStatus == 6">待提货</span>
                    <span v-else>未知状态</span>
                </span>
            </template>
        </el-table-column>
        <!-- <el-table-column prop="returnCount" label="回单份数" width="200px"></el-table-column> -->
        <el-table-column prop="faHuoAddress" label="发货地址" width="200px"></el-table-column>
        <el-table-column prop="customerAddress" label="收货地址" width="250px"></el-table-column>
        <el-table-column prop="signCount" label="签收数量" width="180"></el-table-column>
        <el-table-column prop="realName" label="签收人" width="180"></el-table-column>
        <el-table-column prop="signTime" label="签收时间" width="150px"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          background
          :page-sizes="[3, 5, 7 , 10 , 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout=" total,sizes,prev, pager, next,jumper"
          :total="total"
          @next-click="nextPage"
          @prev-click="prevPage"
          @current-change="changePage"
          @size-change="sizeChange">
      </el-pagination>
    </div>
  </template>
  
  <script>
  export default {
    name: 'LogisticsManagement',
    data() {
      return {
        searchForm: { },
        options: [{ value: '0', label: '待分配' },
            { value: '1', label: '待调度' },
            { value: '2', label: '运输中' },
            { value: '3', label: '已签收' },
            { value: '4', label: '已拒绝' },
            { value: '5', label: '已取消' },
            { value: '6', label: '待提货' },], //订单状态下拉框
        options2: [{ value: '0', label: '未回收' },
        { value: '1', label: '已回收' },
        { value: '2', label: '已寄出' },
        { value: '3', label: '已确认' },
        ], //回单状态下拉框
        tableData: [], // 这里需要填充实际的数据
        pageSize: 7,
        total: 0,
        pageNum:1,
      }
    },
    methods: {
      
      handleReturn(val){  //回单
          console.log(val);
        if(val.returnStatus ==1 ){
          this.$message({
              type: 'warning',
              message: '已回单,不能重复回单'
            });
        }
        if(val.returnStatus == 0){
          this.$axios.get("/api/returnOrder/handleReturn/" + val.orderId)
            .then(resp => {
                console.log(resp.data)
                if(resp.data.code==200){
                  this.$message({
                  type: 'success',
                  message: '回单成功'
                });
                }
            this.onSearch(); 
            })
        }
      },


      onSearch() {
        // 实现搜索逻辑
        let pageParam = {};
        pageParam.pageNum = this.pageNum;
        pageParam.pageSize = this.pageSize;
        pageParam.param = this.searchForm;
        this.$axios.post("/api/returnOrder/queryReturnOrder",pageParam)
            .then(resp =>{
              console.log(resp.data)
              if(resp.data.code==200){
                //给数据tableData赋值
                this.tableData =resp.data.data.list
                //给分页总数赋值
                this.total = resp.data.data.total
            }
            })
      },
  

      onReset() {
        // 重置搜索表单
        this.searchForm = {

        }
        this.onSearch()
      },



    nextPage(val){   //val 当前页 方法自动获取当前页
              //下一页  获取当前页pageNum
              this.pageNum= val;
              this.onSearch();
          },
    prevPage(val){
        //下一页
        this.pageNum= val;
        this.onSearch();
    },
    changePage(val){
        //当前页
        this.pageNum= val;
        this.onSearch();
    },
    sizeChange(val){
        //下拉框  每页条数
        this.pageSize= val;
        this.pageNum=1;
        this.onSearch();
    }

    },
    created() {
      this.onSearch()
    },
  }
  </script>
  
  <style scoped>
  .logistics-management {
    padding: 20px;
  }
  </style>